<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	request.setAttribute("path", request.getContextPath());
%>
<!DOCTYPE html>
<html>
<head>
	<title>致-青春   ${article.title }</title>
	<link rel="stylesheet" type="text/css" href="${path}/css/base.css" />
	<script type="text/javascript" src="${path}/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="${path}/js/jquery.zhi-qingchun-0.1.js"></script>
	<script type="text/javascript">
		function check() {
			

			var comment = $("textarea[name='comment']");
			comment.wipe();
			if (comment.val() == "") {
				comment.er("评论不能为空");
				return false;
			} else if (comment.val().length > 140 ) {
				comment.er("评论不能超过140个字符");
				return false;
			}
			
			return true;
		}
		
		function collect(id, userId) {
			$.get("${path}/conllectArticle.html", 
					{ id : id,
					  userId : userId
					}, 
					function(data) {
						
						var t = $("div[class='collection']").find("a");
						if (data == "1") {
							t.find("img").attr("src", "${path}/img/like.png");
							t.find("span").text("已收藏");
							var _num = $("span[class='collection-num']").text();
							$("span[class='collection-num']").text(++_num);
							t.bind("mouseover", function(event) {
								t.find("span").text("取消收藏");
							});
							t.bind("mouseout", function(event) {
								t.find("span").text("已收藏");
							});
						} else if (data == "2") {
							t.find("img").attr("src", "${path}/img/unlike.png");
							t.unbind("mouseover");
							t.unbind("mouseout");
							t.find("span").text("收藏");
							var _num = $("span[class='collection-num']").text();
							$("span[class='collection-num']").text(--_num);
						} else if (data == "0") {
							alert("请先登录");
						}
					});
			
			}
		
			function modify(id) {
				location = "modifyArticle.html?id=" + id;
			}
			
			function del(id) {
				if(confirm("确认删除？"))
					location = "deleteArticle.html?id=" + id;
			}
			
			function delComment(cid, aid) {
				if (confirm("确认删除？")) {
					location = "delComment.html?id="+ cid + "&articleId=" + aid;
				}
			}
	</script>
</head>
<body>
	<div id="container">
		<jsp:include page="/page/common/header.jsp"></jsp:include>
		<div id="kernel" class="center-box">
		<div class="article">
			<div class="navigator">
			<!-- 
				<a href="category.html?id=${article.parentCategory }">${article.parentCategoryName }</a>
				&gt;&gt;
				<a href="category.html?id=${article.category }">${article.categoryName }</a>
				&gt;&gt;
			 -->
			 ${article.parentCategoryName } &gt;&gt; ${article.categoryName } &gt;&gt;
			</div>
			<h2>${article.title }</h2>
			<div class="summary">
				<span class="author">
					<a href="user.html?id=${article.author }">${article.authorName }</a>
				</span>
				<span>发表于</span>
				<span class="time">
					<fmt:formatDate value="${article.insertTime }" pattern="yyyy-MM-dd HH:mm:ss"/>
				</span>
			</div>
			<div class="content">
				${article.content }
			</div>
			<c:if test="${isCollect == 'no' }">
				<div class="collection">
					<a href="javascript:;" onclick="collect('${article.id }', '${sessionScope.user.id }');" id="is-collected">
						<img src="${path }/img/unlike.png" />
						<span>收藏</span>
					</a>
					<p id="collect-val">已有 <span class="collection-num">${article.collection }</span> 人收藏该文章</p>
				</div>
			</c:if>
			<c:if test="${isCollect == 'yes' }">
				<div class="collection">
					<a href="javascript:;" onclick="collect('${article.id }', '${sessionScope.user.id }');" id="is-collected">
						<img src="${path }/img/like.png" />
						<span>已收藏</span>
					</a>
					<p id="collect-val">已有 <span class="collection-num">${article.collection }</span> 人收藏该文章</p>
				</div>
			</c:if>
			<c:if test="${isCollect == 'self' }">
				<div>
					<a href="javascript:;" onclick="modify('${article.id }');">修改</a>
					<a href="javascript:;" onclick="del('${article.id }');">删除</a>
				</div>
			</c:if>
			<div class="comments">
				<h3>评论</h3>
				<ul>
				<c:forEach items="${commentList }" var="comment">
					<li>
						<div class="avatar">
							<img alt="avatar" src="${path }/img/avatar/${comment.avatar }" />
						</div>
						<div class="comment-summary">
							<span class="author">
								<a href="user.html?id=${comment.usrId }">${comment.usrName }</a>
							</span>
							<span>发表于</span>
							<span class="time"><fmt:formatDate value="${comment.time }" pattern="yyyy-MM-dd HH:mm:ss"/></span>
 							<c:if test="${comment.usrId == sessionScope.user.id }">
								<span class="comment-summary-action">
									<a href="javascript:void(0);" onclick="delComment('${comment.id }', '${article.id }')">删除</a>
								</span>
							</c:if>
						</div>
						<div class="comment-content">
							${comment.content }
						</div>
					</li>
				</c:forEach>
				</ul>
				<c:if test="${sessionScope.user != null }">
				<h3>发表评论</h3>
				<div class="user-comment">
					<form action="comment.html" method="post" onsubmit="return check();">
						<input type="hidden" name="articleId" value="${article.id }" />
						<textarea rows="" cols="" name="comment"></textarea>
						
						<input type="submit" value="提交" />
					</form>
				</div>
				</c:if>
			</div>
		</div>
		<div class="sidebar">
			<jsp:include page="/sidebar.html"></jsp:include>
		</div>
		</div>
		<jsp:include page="/page/common/footer.jsp"></jsp:include>
	</div>
		
</body>
</html>